<template>
	<view class="container p-bottom" v-if="goods_list.length">
		<view v-if="isShowTab" class="swiper-tab dis-flex flex-y-center flex-x-around">
			<view v-for="item in DeliveryTypeEnum" :class="{ on: curDelivery == item.value }" :key="item.value" class="swiper-tab-item" :data-current="item.value" @tap="onSwichDelivery">{{ item.name }}</view>
		</view>
		<view v-if="curDelivery == DeliveryTypeEnum.EXPRESS.value" @tap="onSelectAddress" class="flow-delivery">
			<view class="flow-delivery__detail dis-flex flex-y-center">
				<view class="detail-location dis-flex"><text class="iconfont icon-dingwei"></text></view>
				<view class="detail-content flex-box">
					<template v-if="address.address_id">
						<view class="detail-content__title dis-flex">
							<text class="f-30">{{ address.name }}</text>
							<text class="detail-content__title-phone f-28">{{ address.phone }}</text>
						</view>
						<view class="detail-content__describe">
							<text class="col-7">{{ address.region.province }} {{ address.region.city }} {{ address.region.region }} {{ address.detail }}</text>
						</view>
					</template>
					<view v-else class="detail-content__describe dis-flex"><text class="col-6">请选择配送地址</text></view>
				</view>
				<view class="detail-arrow dis-flex"><text class="iconfont icon-xiangyoujiantou user-orderJtou"></text></view>
			</view>
		</view>
		<!-- 上门自提：自提门店 -->
		<block v-if="curDelivery == DeliveryTypeEnum.EXTRACT.value">
			<view @tap="onSelectExtractPoint" class="flow-delivery">
				<view class="flow-delivery__detail dis-flex flex-y-center">
					<view class="detail-location dis-flex"><text class="iconfont icon-dingwei"></text></view>
					<view class="detail-content flex-box">
						<block v-if="extract_shop.shop_id">
							<view class="detail-content__title dis-flex">
								<text class="f-30">{{ extract_shop.shop_name }}</text>
							</view>
							<view class="detail-content__describe">
								<text class="col-7">{{ extract_shop.region.province }} {{ extract_shop.region.city }} {{ extract_shop.region.region }} {{ extract_shop.address }}</text>
							</view>
						</block>
						<block v-else>
							<view class="detail-content__describe dis-flex"><text class="col-6">请选择自提点</text></view>
						</block>
					</view>
					<view class="detail-arrow dis-flex"><text class="iconfont icon-xiangyoujiantou user-orderJtou"></text></view>
				</view>
			</view>
			<!-- 自提联系方式 -->
			<view class="flow-extract-contact m-top20 b-f">
				<view class="contact-item dis-flex">
					<view class="item_label dis-flex flex-x-end flex-y-center"><text>联系人：</text></view>
					<view class="item_ipt flex-box dis-flex flex-y-center"><input placeholder="请填写联系人姓名" v-model="linkman" /></view>
				</view>
				<view class="contact-item dis-flex">
					<view class="item_label dis-flex flex-x-end flex-y-center"><text>联系电话：</text></view>
					<view class="item_ipt flex-box dis-flex flex-y-center"><input placeholder="请填写联系电话" v-model="phone" /></view>
				</view>
			</view>
		</block>

		<view class="m-top20">
			<view class="checkout_list" v-for="(item, index) in goods_list" :key="index">
				<view class="flow-shopList dis-flex" :data-index="index">
					<!-- 商品图片 -->
					<view class="flow-list-left"><image mode="scaleToFill" :src="item.goods_image"></image></view>
					<view class="flow-list-right flex-box">
						<!-- 商品名称 -->
						<text class="f-30 col-3 twolist-hidden">{{ item.goods_name }}</text>
						<!-- 商品sku信息 -->
						<text class="f-24 col-7">{{ item.goods_sku.goods_attr }}</text>
						<!-- 商品数量和单价 -->
						<view class="flow-list-cont dis-flex flex-x-between flex-y-center">
							<text class="small">×{{ item.total_num }}</text>
							<text class="flow-cont" :class="{ 'price-delete': item.is_user_grade }">￥{{ item.goods_price }}</text>
						</view>
						<!-- 会员折扣价 -->
						<view v-if="item.is_user_grade" class="grade-price">
							<text>会员折扣价：￥{{ item.grade_goods_price }}</text>
						</view>
					</view>
				</view>
			</view>
			<view class="flow-num-box b-f padding-box">
				<text>共{{ order_total_num }}件商品，合计：</text>
				<text class="flow-money col-m">￥{{ order_total_price }}</text>
			</view>
			<!-- 商品金额 -->
			<view class="flow-all-money b-f m-top20">
				<view class="flow-all-list dis-flex">
					<text class="flex-five">订单总金额：</text>
					<view class="flex-five t-r">
						<text class="col-m">￥{{ order_total_price }}</text>
					</view>
				</view>
				<view class="flow-all-list dis-flex">
					<text class="flex-five">优惠券：</text>
					<view class="flex-five t-r">
						<view @tap="onTogglePopupCoupon">
							<block v-if="coupon_list.length > 0">
								<text class="col-m" v-if="coupon_id > 0">-￥{{ coupon_money }}</text>
								<text class="col-m" v-else>有{{ coupon_list.length }}张优惠券可用</text>
								<text class="iconfont icon-xiangyoujiantou user-orderJtou"></text>
							</block>
							<text v-else class="">无优惠券可用</text>
						</view>
					</view>
				</view>
				<!-- 积分抵扣 -->
				<view v-if="is_allow_points" class="points flow-all-list dis-flex flex-y-center">
					<view class="block-left flex-five">
						<form class="flex-five" @submit="onShowPoints" report-submit="true">
							<button formType="submit" class="btn-normal">
								<text class="title">可用{{ setting.points_name }}抵扣：</text>
								<text class="iconfont icon-help"></text>
							</button>
						</form>
					</view>
					<view class="flex-five dis-flex flex-x-end flex-y-center">
						<text class="points-money col-m">￥{{ points_money }}</text>
						<switch style="margin-left: 20rpx;transform:scale(0.7)" :checked="isUsePoints" size="48rpx" color="#07c160" @change="onTriggerPoints" />
					</view>
				</view>
				<!-- 配送费用 -->
				<view v-if="curDelivery == DeliveryTypeEnum.EXPRESS.value" class="dis-flex flow-all-list">
					<text class="flex-five">配送费用：</text>
					<view class="flex-five t-r">
						<view v-if="address.address_id">
							<text class="col-m" v-if="intra_region">+￥{{ express_price }}</text>
							<text v-else>不在配送范围</text>
						</view>
						<view v-else><text class="col-7">请先选择配送地址</text></view>
					</view>
				</view>
			</view>
			<!-- 支付方式 -->
			<view class="pay-method flow-all-money b-f m-top20">
				<view class="flow-all-list dis-flex"><text class="flex-five">支付方式</text></view>
				<form @submit="onSelectPayType" :data-value="PayTypeEnum.WECHAT.value" report-submit="true" v-if="paymentChannel.WECHAT">
					<button formType="submit" class="btn-normal">
						<view class="pay-item dis-flex flex-x-between">
							<view class="item-left dis-flex flex-y-center">
								<view class="item-left_icon wechat"><text class="iconfont icon-weixinzhifu"></text></view>
								<view class="item-left_text">
									<text>{{ PayTypeEnum.WECHAT.name }}</text>
								</view>
							</view>
							<view class="item-right col-m" v-if="curPayType == PayTypeEnum.WECHAT.value"><text class="iconfont icon-duihao"></text></view>
						</view>
					</button>
				</form>
				<form @submit="onSelectPayType" :data-value="PayTypeEnum.ALIPAY.value" report-submit="true" v-if="paymentChannel.ALIPAY">
					<button formType="submit" class="btn-normal">
						<view class="pay-item dis-flex flex-x-between">
							<view class="item-left dis-flex flex-y-center">
								<view class="item-left_icon alipay"><text class="iconfont icon-zhifubao"></text></view>
								<view class="item-left_text">
									<text>{{ PayTypeEnum.ALIPAY.name }}</text>
								</view>
							</view>
							<view class="item-right col-m" v-if="curPayType == PayTypeEnum.ALIPAY.value"><text class="iconfont icon-duihao"></text></view>
						</view>
					</button>
				</form>
				<form @submit="onSelectPayType" :data-value="PayTypeEnum.BALANCE.value" report-submit="true" v-if="paymentChannel.BALANCE">
					<button formType="submit" class="btn-normal">
						<view class="pay-item dis-flex flex-x-between">
							<view class="item-left dis-flex flex-y-center">
								<view class="item-left_icon balance"><text class="iconfont icon-qiandai"></text></view>
								<view class="item-left_text">
									<text>{{ PayTypeEnum.BALANCE.name }}</text>
								</view>
							</view>
							<view class="item-right col-m" v-if="curPayType == PayTypeEnum.BALANCE.value"><text class="iconfont icon-duihao"></text></view>
						</view>
					</button>
				</form>
			</view>
			<!-- 买家留言 -->
			<view class="flow-all-money b-f m-top20">
				<view class="ipt-wrapper dis-flex flow-all-list"><input type="text" placeholder="选填：买家留言（50字以内）" v-model="remark" /></view>
			</view>

			<!-- 提交订单 -->
			<view class="flow-fixed-footer b-f m-top10">
				<view class="dis-flex chackout-box">
					<view class="chackout-left pl-12">
						实付款：
						<text class="col-m">￥{{ order_pay_price }}</text>
					</view>
					<view @tap="onSubmitOrder" class="chackout-right"><text class="flow-btn f-32">提交订单</text></view>
				</view>
			</view>
			<!-- 优惠券弹出框 -->

			<popup :show="showBottomPopup" :overlay="true" type="bottom" @close="onTogglePopupCoupon">
				<view class="popup__coupon">
					<view class="coupon__title f-32">选择优惠券</view>
					<view class="coupon-list">
						<scroll-view :scroll-y="true" style="height: 565rpx;">
							<view class="coupon-item" v-for="(item, index) in coupon_list" :key="index">
								<view :class="'item-wrapper color__' + item.color.text" @tap="onSelectCoupon" :data-index="index" :data-id="item.user_coupon_id">
									<view class="coupon-type">{{ item.coupon_type.text }}</view>
									<view class="tip dis-flex flex-dir-column flex-x-center">
										<view v-if="item.coupon_type.value == 10">
											<text class="f-30">￥</text>
											<text class="money">{{ item.reduce_price }}</text>
										</view>
										<text class="money" v-if="item.coupon_type.value == 20">{{ item.discount }}折</text>
										<text class="pay-line">满{{ item.min_price }}元可用</text>
									</view>
									<view class="split-line"></view>
									<view class="content dis-flex flex-dir-column flex-x-between">
										<view class="title">{{ item.name }}</view>
										<view class="bottom dis-flex flex-y-center">
											<view class="time flex-box">
												<text>有效期：{{ item.start_time.text }}~{{ item.end_time.text }}</text>
											</view>
											<!-- <view class="state flex-box">
                    <text>-￥{{ item.reduced_price }}</text>
                  </view> -->
										</view>
									</view>
									<!--  -->
								</view>
							</view>
						</scroll-view>
					</view>
					<!-- 不使用优惠券 -->
					<view class="coupon__do_not dis-flex flex-y-center flex-x-center">
						<view class="control dis-flex flex-y-center flex-x-center" @tap="onNotUseCoupon"><text class="f-26">不使用优惠券</text></view>
					</view>
					<!-- <view class="footer-fixed f-32">
					        <view catchtap="onTogglePopupCoupon" class="order-bt" style="width:100%">关闭</view>
					      </view> -->
				</view>
			</popup>
		</view>
		<custom-dialog ref="pointDialog"></custom-dialog>
	</view>
</template>

<script>
// 枚举类：发货方式
import DeliveryTypeEnum from '@/utils/enum/DeliveryType.js';
// 枚举类：支付方式
import PayTypeEnum from '@/utils/enum/order/PayType';
import Tools from '@/utils/Tools.js';
import popup from '@/components/popup/index.vue';
// import vanSwitch from '@/components/switch/index.vue';
import Route from '@/utils/Route.js';
import Payment from '@/utils/Payment.js';
import Verify from '@/utils/verify.js';

import customDialog from '@/components/dialog/index.vue';
import Dialog from '@/components/dialog/dialog.js';
export default {
	components: {
		popup,
		customDialog
		// switch
	},
	data() {
		return {
			selectedShopId: '',
			isShowTab: true,
			DeliveryTypeEnum,
			PayTypeEnum,
			curPayType: PayTypeEnum.BALANCE.value,
			curDelivery: 10,
			address: {
				address_id: null
			},
			options: {},
			goods_list: [],
			order_total_num: 0,
			order_total_price: 0,
			coupon_money: '',
			coupon_list: [],
			is_allow_points: false,
			setting: {},
			points_money: 0,
			remark: '',
			order_pay_price: 0,
			showBottomPopup: false,
			disabled: false,
			coupon_id: 0,
			isUsePoints: false,
			extract_shop: {},
			linkman: '',
			phone: '',
			paymentChannel: {
				wechat: false,
				alipay: false
			},
			exist_address: false,
			authId: null
		};
	},
	onLoad(options) {
		this.options = options;
		this.authId = uni.getStorageSync('authId') || null;
		uni.$on('selectedShop', res => {
			this.selectedShopId = res.selectedShopId;
		});
		const paymentFilter = Payment.filter();
		this.paymentChannel = paymentFilter.paymentChannel;
		this.curPayType = PayTypeEnum[paymentFilter.curPayKey].value;
	},
	onShow() {
		this.getOrderData();
	},
	methods: {
		/**
		 * 切换配送方式
		 */
		onSwichDelivery(e) {
			// 设置当前配送方式
			let curDelivery = e.currentTarget.dataset.current;
			this.curDelivery = curDelivery;

			// 重新获取订单信息
			this.getOrderData();
		},

		/**
		 * 获取当前订单信息
		 */
		getOrderData() {
			let options = this.options;
			// 获取订单信息回调方法
			let callback = result => {
				// #ifdef H5
				// #endif
				let resData = result.data;
				// 请求错误
				if (result.code !== 1) {
					Tools.showError(result.msg);
					return false;
				}
				// 显示错误信息
				if (resData.has_error) {
					Tools.showError(resData.error_msg);
				}
				let data = {};
				// 当前选择的配送方式
				data.curDelivery = resData.delivery;
				// 如果只有一种配送方式则不显示选项卡
				data.isShowTab = resData.setting.delivery.length > 1;
				// 上门自提联系信息
				if (this.linkman === '') {
					data.linkman = resData.last_extract.linkman;
				}
				if (this.phone === '') {
					data.phone = resData.last_extract.phone;
				}
				// 设置页面数据
				const res = Object.assign({}, resData, data);
				// _this.setData(Object.assign({}, resData, data));
				this.address = res.address || {};
				this.goods_list = res.goods_list;
				this.order_total_num = res.order_total_num;
				this.order_total_price = res.order_total_price;
				this.coupon_money = res.coupon_money;
				this.coupon_list = res.coupon_list;
				this.is_allow_points = res.is_allow_points;
				this.setting = res.setting;
				this.points_money = res.points_money;
				this.intra_region = res.intra_region;
				this.express_price = res.express_price;
				this.order_pay_price = res.order_pay_price;
				this.extract_shop = res.extract_shop;
				this.coupon_id = res.coupon_id;
				this.exist_address = res.exist_address;
				uni.hideLoading();
			};
			wx.showLoading({
				title: '加载中...'
			});
			// 请求的参数
			let params = {
				delivery: this.curDelivery || 0,
				shop_id: this.selectedShopId || 0,
				coupon_id: this.selectCouponId || 0,
				is_use_points: this.isUsePoints ? 1 : 0
			};
			if (this.authId) {
				this.$set(params, 'id', this.authId);
			}

			if (options.order_type === 'buyNow') {
				this.$get(
					this.$api.buyNow,
					Object.assign({}, params, {
						goods_id: options.goods_id,
						goods_num: options.goods_num,
						goods_sku_id: options.goods_sku_id
					}),
					res => {
						callback(res);
					}
				);
			} else if (options.order_type === 'cart') {
				// 购物车结算
				this.$get(
					this.$api.orderCart,
					Object.assign({}, params, {
						cart_ids: options.cart_ids || 0
					}),
					result => {
						callback(result);
					}
				);
			} else if (options.order_type === 'sharp') {
				// 秒杀活动结算
				this.$get(
					this.$api.checkoutSharpOrder,
					Object.assign({}, params, {
						active_time_id: options.active_time_id,
						sharp_goods_id: options.sharp_goods_id,
						goods_sku_id: options.goods_sku_id,
						goods_num: options.goods_num
					}),
					res => {
						callback(res);
					}
				);
			} else if (options.order_type === 'bargain') {
				// 砍价活动结算
				this.$get(
					this.$api.checkoutBargainOrder,
					Object.assign({}, params, {
						task_id: options.task_id,
						goods_sku_id: options.goods_sku_id
					}),
					res => {
						callback(res);
					}
				);
			}
		},
		/**
		 * 选择优惠券(弹出/隐藏)
		 */
		onTogglePopupCoupon() {
			if (this.coupon_list.length > 0) {
				this.showBottomPopup = !this.showBottomPopup;
			}
		},
		/**
		 * 快递配送：选择收货地址
		 */
		onSelectAddress() {
			Route.navigateTo({
				url: '../address/' + (this.exist_address ? 'index?from=flow' : 'create')
			});
		},
		/**
		 * 表单验证
		 */
		onVerify() {
			if (this.has_error) {
				Tools.showError(this.error_msg);
				return false;
			}
			// 验证自提填写的联系方式
			if (this.curDelivery == DeliveryTypeEnum.EXTRACT.value) {
				this.linkman = this.linkman.trim();
				this.phone = this.phone.trim();
				if (this.selectedShopId <= 0) {
					Tools.showError('请选择自提的门店');
					return false;
				}
				if (Verify.isEmpty(this.linkman)) {
					Tools.showError('请填写自提联系人');
					return false;
				}
				if (Verify.isEmpty(this.phone)) {
					Tools.showError('请填写自提联系电话');
					return false;
				}
				if (!Verify.isPhone(this.phone)) {
					Tools.showError('请输入正确的联系电话');
					return false;
				}
			}
			return true;
		},
		/**
		 * 跳转到未付款订单
		 */
		redirectToOrderIndex() {
			let path = '/pages/order/index';
			if (this.options.order_type === 'bargain') {
				path = '/pages/bargain/index/index?tab=1';
			}
			Route.redirectTo({
				url: path
			});
		},
		/**
		 * 订单提交
		 */
		onSubmitOrder() {
			let options = this.options;

			if (this.disabled) {
				return false;
			}

			// 表单验证
			if (!this.onVerify()) {
				return false;
			}

			// 订单创建成功后回调--微信支付
			let callback = result => {
				if (result.code === -10) {
					Tools.showError(result.msg, () => {
						this.redirectToOrderIndex();
					});
					return false;
				}

				
				// 余额支付
				if (result.data.pay_type == PayTypeEnum.BALANCE.value) {
					Tools.showSuccess(result.msg.success, () => {
						this.redirectToOrderIndex();
					});
				} else {
					Payment.pay(
						result.data.payment,
						result.data.pay_type,
						() => {
							this.redirectToOrderIndex();
						},
						msg => {
							this.redirectToOrderIndex();
						}
					);
				}
			};

			// 按钮禁用, 防止二次提交
			this.disabled = true;

			// 显示loading
			uni.showLoading({
				title: '正在处理...'
			});

			let url = '';

			// 表单提交的数据
			let postData = {
				delivery: this.curDelivery,
				pay_type: this.curPayType,
				shop_id: this.selectedShopId || 0,
				linkman: this.linkman,
				phone: this.phone,
				coupon_id: this.selectCouponId || 0,
				is_use_points: this.isUsePoints ? 1 : 0,
				remark: this.remark || '',
				return_url: Tools.getSite() + '/pages/order/index'
			};

			if (this.authId) {
				this.$set(postData, 'id', this.authId);
			}

			// 创建订单-立即购买
			if (options.order_type === 'buyNow') {
				url = this.$api.buyNow;
				postData = Object.assign(postData, {
					goods_id: options.goods_id,
					goods_num: options.goods_num,
					goods_sku_id: options.goods_sku_id
				});
			}

			// 创建订单 - 购物车结算;
			if (options.order_type === 'cart') {
				url = this.$api.orderCart;
				postData = Object.assign(postData, {
					cart_ids: options.cart_ids || 0
				});
			}

			// 创建订单-砍价活动
			if (options.order_type === 'bargain') {
				url = this.$api.checkoutBargainOrder;
				postData = Object.assign(postData, {
					task_id: options.task_id,
					goods_sku_id: options.goods_sku_id
				});
			}

			// 创建订单-秒杀
			if (options.order_type === 'sharp') {
				url = this.$api.checkoutSharpOrder;
				postData = Object.assign(postData, {
					active_time_id: options.active_time_id,
					sharp_goods_id: options.sharp_goods_id,
					goods_sku_id: options.goods_sku_id,
					goods_num: options.goods_num
				});
			}

			// 订单提交
			this.$post(
				url,
				postData,
				res => {
					callback(res);
				},
				null,
				() => {
					uni.hideLoading();
					this.disabled = false;
				}
			);
		},
		/**
		 * 选择支付方式
		 */
		onSelectPayType(e) {
			// 设置当前支付方式

			this.curPayType = e.currentTarget.dataset.value;
		},
		/**
		 * 选择积分抵扣
		 */
		onTriggerPoints({ detail }) {
			console.log(detail.value);
			this.isUsePoints = detail.value;
			this.getOrderData();
		},

		/**
		 * 上门自提：选择自提点
		 */
		onSelectExtractPoint() {
			let selectedId = this.selectedShopId;
			Route.navigateTo({
				url: '../_select/extract_point/index?selected_id=' + selectedId
			});
		},
		/**
		 * 选择优惠券
		 */
		onSelectCoupon(e) {
			// 记录选中的优惠券id
			this.selectCouponId = e.currentTarget.dataset.id;
			// 重新获取订单信息
			this.getOrderData();
			this.$nextTick(() => {
				// 隐藏优惠券弹层
				this.onTogglePopupCoupon();
			});
		},
		/**
		 * 不使用优惠券
		 */ onNotUseCoupon() {
			this.selectCouponId = 0;
			// 重新获取订单信息
			this.getOrderData();
			this.$nextTick(() => {
				// 隐藏优惠券弹层
				this.onTogglePopupCoupon();
			});
		},
		/**
		 * 显示积分说明
		 */
		onShowPoints(e) {
			// 记录formId
			this.$saveFormId(e.detail.formId);
			let setting = this.setting;
			Dialog({
				title: `${setting.points_name}说明`,
				message: setting.points_describe,
				isScroll: true, // 滚动
				selector: 'pointDialog',
				buttons: [
					{
						text: '关闭',
						color: 'red',
						type: 'cash'
					}
				]
			});
		}
	}
};
</script>

<style>
/* 选项卡 */

.swiper-tab {
	width: 100%;
	text-align: center;
	height: 85rpx;
	background-color: #fff;
	border-bottom: 1px solid rgb(248, 248, 248);
}

.swiper-tab .swiper-tab-item {
	width: 35%;
	height: 100%;
	font-size: 28rpx;
	color: #777;
	display: flex;
	justify-content: center;
	align-items: center;
	box-sizing: border-box;
	border-bottom: 2px solid #ffffff00;
}

.swiper-tab .on {
	color: #fd4a5f;
	border-bottom: 2px solid #fd4a5f;
}

/* 配送信息 */

.flow-delivery {
	padding: 34rpx 30rpx;
	background: #fff
		url('')
		bottom left repeat-x;
	background-size: 120rpx auto;
}

.detail-content {
	padding: 0 20rpx;
}

.detail-content__title {
	margin-bottom: 6rpx;
}

.detail-content .detail-content__title-phone {
	margin-left: 10rpx;
}

.detail-content .detail-content__describe {
	font-size: 28rpx;
}

/* 买家留言 */

.flow-all-money .ipt-wrapper input {
	width: 100%;
	height: 75rpx;
}

/* 商品列表 */

.checkout_list {
	padding: 20rpx 30rpx 4rpx 30rpx;
	background: #fff;
	border-bottom: 1rpx solid rgb(248, 248, 248);
}

.checkout_list .flow-shopList {
	padding: 5rpx 0 10rpx;
	border-bottom: 1rpx solid rgb(248, 248, 248);
}

.checkout_list .flow-shopList:last-child {
	border-bottom: 0;
}

.flow-header-left {
	padding-left: 90rpx;
}

/* 会员价 */

.flow-shopList .flow-list-right .flow-cont.price-delete {
	font-size: 26rpx;
	color: #777;
	text-decoration: line-through;
}

.flow-shopList .grade-price {
	padding-top: 8rpx;
	font-size: 28rpx;
	color: #ff495e;
	text-align: right;
}

/* 优惠券选择 */

.popup__coupon {
	width: 750rpx;
	background: #fff;
	box-sizing: border-box;
	padding: 30rpx;
}

.popup__coupon .coupon__do_not .control {
	width: 90%;
	height: 72rpx;
	margin-bottom: 24rpx;
	color: #888;
	border: 1rpx solid #e3e3e3;
	border-radius: 10rpx;
}

.popup__coupon .coupon__title {
	text-align: center;
	margin-bottom: 30rpx;
}

.popup__coupon .coupon-list .coupon-item {
	position: relative;
	overflow: hidden;
	margin-bottom: 22rpx;
}

.popup__coupon .coupon-list .coupon-item .item-wrapper {
	display: flex;
	background: #fff;
	border-radius: 8rpx;
	color: #fff;
	height: 170rpx;
	overflow: hidden;
}

.popup__coupon .coupon-list .coupon-item .item-wrapper .coupon-type {
	position: absolute;
	top: 0;
	right: 0;
	z-index: 10;
	width: 128rpx;
	padding: 3px 0;
	background: #a771ff;
	font-size: 20rpx;
	text-align: center;
	color: #fff;
	transform: rotate(45deg);
	transform-origin: 64rpx 64rpx;
}

.popup__coupon .coupon-list .coupon-item .item-wrapper.color__blue {
	background: linear-gradient(-125deg, #57bdbf, #2f9de2);
}

.popup__coupon .coupon-list .coupon-item .item-wrapper.color__red {
	background: linear-gradient(-128deg, #ff6d6d, #ff3636);
}

.popup__coupon .coupon-list .coupon-item .item-wrapper.color__violet {
	background: linear-gradient(-113deg, #ef86ff, #b66ff5);
}

.popup__coupon .coupon-list .coupon-item .item-wrapper.color__violet .coupon-type {
	background: #55b5ff;
}

.popup__coupon .coupon-list .coupon-item .item-wrapper.color__yellow {
	background: linear-gradient(-141deg, #f7d059, #fdb054);
}

.popup__coupon .coupon-list .coupon-item .item-wrapper .tip {
	position: relative;
	flex: 0 0 32%;
	text-align: center;
	border-radius: 8px 0 0 8px;
}

.popup__coupon .coupon-list .coupon-item .item-wrapper .tip .money {
	font-weight: bold;
	font-size: 46rpx;
}

.popup__coupon .coupon-list .coupon-item .item-wrapper .tip .pay-line {
	font-size: 22rpx;
}

.popup__coupon .coupon-list .coupon-item .item-wrapper .split-line {
	position: relative;
	flex: 0 0 0;
	border-left: 4rpx solid #fff;
	margin: 0 5px 0 3px;
	background: #fff;
}

.popup__coupon .coupon-list .coupon-item .item-wrapper .split-line:before,
.popup__coupon .coupon-list .coupon-item .item-wrapper .split-line:after {
	content: '';
	position: absolute;
	width: 12px;
	height: 6px;
	background: #fff;
	left: -7px;
	z-index: 1;
}

.popup__coupon .coupon-list .coupon-item .item-wrapper .split-line:before {
	border-radius: 0 0 8px 8px;
	top: 0;
}

.popup__coupon .coupon-list .coupon-item .item-wrapper .split-line:after {
	border-radius: 8px 8px 0 0;
	bottom: 0;
}

.popup__coupon .coupon-list .coupon-item .item-wrapper .content {
	flex: 1;
	padding: 30rpx 20rpx;
	border-radius: 8px 0 0 8px;
}

.popup__coupon .coupon-list .coupon-item .item-wrapper .content .title {
	font-size: 34rpx;
}

.popup__coupon .coupon-list .coupon-item .item-wrapper .content .bottom .time {
	font-size: 24rpx;
	line-height: 24rpx;
}

.popup__coupon .coupon-list .coupon-item .item-wrapper .content .bottom .state {
	height: 46rpx;
	width: 122rpx;
	line-height: 92rpx;
	text-align: center;
	color: #fff;
	font-size: 26rpx;
}

/* 积分抵扣 */

.points .title {
	margin-right: 5rpx;
}

.points .icon-help {
	font-size: 28rpx;
}

.points .points-money {
	margin-right: 20rpx;
}

/* 支付方式 */

.pay-method .pay-item {
	padding: 20rpx 0;
	font-size: 28rpx;
	border-bottom: 1rpx solid rgb(248, 248, 248);
}

.pay-method .pay-item .item-left_icon {
	margin-right: 20rpx;
	font-size: 32rpx;
}

.pay-method .pay-item .item-left_icon.wechat {
	color: #00c800;
}

.pay-method .pay-item .item-left_icon.balance {
	color: #ff9700;
}
.pay-method .pay-item .item-left_icon.alipay {
	color: #0093e2;
}

/* 门店自提联系人 */

.flow-extract-contact {
	padding: 8rpx 24rpx;
	font-size: 28rpx;
	color: #444;
}

.flow-extract-contact .contact-item {
	padding: 10rpx 0;
	border-bottom: 1rpx solid rgb(248, 248, 248);
}

.flow-extract-contact .contact-item:last-child {
	border-bottom: none;
}

.flow-extract-contact .item_label {
	margin-right: 26rpx;
	width: 150rpx;
}

.flow-extract-contact .item_ipt input {
	font-size: 28rpx;
	width: 100%;
}

.flow-extract-contact .item_ipt .input-placeholder {
	font-size: 28rpx;
}
</style>
